﻿var map;
var side_bar_html;
var Hanoi = new google.maps.LatLng(21.029731376455562, 105.85177183532713);
var marker;
var boundingBox;
var gmarkers = [];
var htmls = [];
var location_test;

function HomeControl(controlDiv, map){
	controlDiv.style.padding = '5px';
	
	// Set CSS for the control border
	var controlUI = document.createElement('DIV');
	controlUI.style.backgroundColor = 'white';
	controlUI.style.borderStyle = 'solid';
	controlUI.style.borderWidth = '2px';
	controlUI.style.cursor = 'pointer';
	controlUI.style.textAlign = 'center';
	controlUI.title = 'Click to set the map to Home';
	controlDiv.appendChild(controlUI);

	// Set CSS for the control interior
	var controlText = document.createElement('DIV');
	controlText.style.fontFamily = 'Arial,sans-serif';
	controlText.style.fontSize = '12px';
	controlText.style.paddingLeft = '4px';
	controlText.style.paddingRight = '4px';
	controlText.innerHTML = 'Hà Nội';
	controlUI.appendChild(controlText);

	// Setup the click event listeners: simply set the map to Chicago
	google.maps.event.addDomListener(controlUI, 'click', function() {
		map.setCenter(Hanoi)
	});
}


function onAddSuccess(response) {
	$('result').value = response;
} 

function $(id){
     return document.getElementById(id);
}
server = {};
  
function InstallFunction(name) {
	server[name] = function() { AE_CallRemote(name, arguments); }
}
InstallFunction("Add");
InstallFunction("Gettest");
	
function initialize() { 
	/* Ha Noi, Viet Nam : (21.029731376455562, 105.85177183532713)
	Ho Chi Minh, Viet Nam(10.706426274771488, 106.4890646972656)
	 Da Nang, Viet Nam(16.037831750815293, 108.1919455566406)
	*/
	  
    var myOptions = {
			zoom: 14,
			center: Hanoi,
			mapTypeId: google.maps.MapTypeId.ROADMAP,
	}
		  
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
	marker = new google.maps.Marker({
		map: map,
		icon:'http://google-maps-icons.googlecode.com/files/factory.png',
		title:"Địa chỉ công ty"
	});
    
    google.maps.event.addListener(map, 'tilesloaded', function (){
        doGetTest();
    });	
    
	google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(event.latLng);
	}); 

	google.maps.event.addListener(map, 'dragend', function(event) {
        doGetTest();
	});  
    
	  
	var homeControlDiv = document.createElement('DIV');
	var homeControl = new HomeControl(homeControlDiv, map);
	homeControlDiv.index = 1;
	map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);	

	//server.Gettest(east, west, south, north, onGetTestSuccess);
}


function clearOverlays() {
google.maps.event.clearListeners(map,'tilesloaded');
  if (gmarkers) {
    for (i in gmarkers) {
      gmarkers[i].setMap(null);
      
    }
  }
}

		
function placeMarker(location) {
	marker.setPosition(location);	  
	location_test = location;
	map.setCenter(location);
} 


function myclick(i) {
    addInfoWindow(gmarkers[i],htmls[i]);
}		



function onGetTestSuccess(response) { 
    side_bar_html = "<br /><br /> <table><thead><th>Tên Công Ty</th><th>Địa chỉ</th><th>Ảnh Đại Diện</th><th>Xem</th></thead>";
    clearOverlays();
    jsonData = eval('(' + response + ')'); 
    //alert(jsonData);
	boundingBox = map.getBounds();      
    var j=0;  
	for (var i=0; i<jsonData.length; i++) {
        var myLatlng = new google.maps.LatLng(jsonData[i].Lat, jsonData[i].Lng);
        if(boundingBox.contains(myLatlng)){
            gmarkers[j] = new google.maps.Marker({
                position: myLatlng,
                map: map,
                icon:'http://google-maps-icons.googlecode.com/files/factory.png',
                title: jsonData[i].TenThuongHieu
            });
            htmls[j] = 'Tên Công Ty :' + jsonData[i].TenThuongHieu;
            side_bar_html += '<tr><td> <a href="javascript:myclick(' + j + ')">' + jsonData[i].TenThuongHieu + '<\/a></td>';
            side_bar_html += '<td>'+jsonData[i].ViTriText+'</td>';
            //side_bar_html += '<td> <img src="'+ jsonData[i].AnhDaiDienLink+'" alt="Klematis" width="30" height="30" /></td></tr>';
            side_bar_html += '<td> <img src="/images/company.jpg" alt="Klematis" width="30" height="30" /></td>';
            side_bar_html += '<td><a href ="/detailCompany?company_id=' + jsonData[i].NhaTuyenDungID + '">Xem</a></td></tr>';
            //alert(side_bar_html);
            j++;
        }
	}
    side_bar_html += '</tr></table>' ;
    for (index in gmarkers) addInfoWindow( gmarkers[index], htmls[index]); // qua bua rom
   
    document.getElementById("side_bar").innerHTML = side_bar_html;
}	
 // tai sao phai add the nay nhi :D	
function addInfoWindow(marker, html){
    var infowindow = new google.maps.InfoWindow({
        content: html,
        maxWidth: 200
    });
    google.maps.event.addListener(marker,'click', function(){
        infowindow.open(map,marker);
    });     
}
    
function doAdd() {
	server.Add($('num1').value, $('num2').value, onAddSuccess);
}	 


 

function doGetTest(){
 	boundingBox = map.getBounds();
    var north = boundingBox.getNorthEast().lat();
    var east = boundingBox.getNorthEast().lng();
    var south = boundingBox.getSouthWest().lat();
    var west = boundingBox.getSouthWest().lng();     
    //alert("South:" + south +"&&West:" + west + "&& north :" + north + "&&east:" +east );    
	server.Gettest(east, west, south, north, onGetTestSuccess);
}          


function AddLocation(){
	alert("Vị trí bạn chọn là:" + location_test);
}
google.maps.event.addDomListener(window, 'load', initialize);

  